<template>
  <div class="box">
    <div>
      <el-button type="primary">新建任务</el-button>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="topbox">
        <el-tab-pane label="我的任务" name="first">
          <div>
            <van-search v-model="value" placeholder="搜索名称" />
          </div>
          <div>
            <van-index-bar>
              <div v-for="data in numberslist" :key="data.type">
                <van-index-anchor :index="data.type" />

                <van-cell :title="i" v-for="(i,$index ) in data.list" :key="$index" />
              </div>
            </van-index-bar>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我下属的任务" name="second"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
let pinyin = require("js-pinyin");
import Vue from "vue";
import http from "@/util/http.js";
import { IndexBar, IndexAnchor, Cell } from "vant";
Vue.use(IndexBar);
Vue.use(IndexAnchor);
import { Search } from "vant";
Vue.use(Search).use(Cell);
export default {
  name: "",
  data() {
    return {
      activeName: "first",
      options: [],
      value: "",
      numberslist: [
        {
          type: "#",
          list: ["A1", "A1", "A2", "A4"],
        },
        {
          type: "B",
          list: ["B1", "B2", "B3"],
        },
        {
          type: "C",
          list: ["C1", "C2", "C3"],
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // photonums(userList) {
    //   //输入原始数据，输出目标数据
    //   console.log(userList);
    //   let letterArr = [];
    //   for (let code = 65; code < 91; code++) {
    //     console.log(String.fromCharCode(code));
    //     letterArr.push(String.fromCharCode(code));
    //   }
    //   //console.log(letterArr);
    //   // letterArr.forEach(() => {
    //   let list = userList.filter(
    //     (item) => item.realname.substring(0, 1).toUpperCase() === "G"
    //   );
    //   console.log(list);
    //   // });
    // },
  },
  mounted() {
    http.post("oa/addresslist/index").then((res) => {
      console.log(res.data.data[0].userList);
      this.photonums = res.data.data[0].userList;
      // this.pinyins = res.data.data[0].userList;
    });
  },
};
</script>

<style scoped lang='scss'>
.el-input__inner {
  padding: 0 8px;
}
.el-select {
  width: 100px;
}
.box {
  padding: 0 30px;
  width: 950px;
  height: 640px;
  border: 2px solid #f2f1f1;
  position: relative;
  border-radius: 10px;
  .el-button {
    position: absolute;
    padding: 5px 15px;
    height: 28px;
    top: 5px;
    right: 40px;
    z-index: 9;
  }
  .van-search__content {
    background: #fff;
  }
  .van-search {
    width: 350px;

    .van-cell {
      background: #fff;
      border: 1px solid #c0c4cc;
      border-radius: 5px;
    }
  }
}
</style>
